<template>
  <div id="cart-info">
    <div class="shop-null" v-if="isShow">
        <h1 align="center">
            购物车为空
        </h1>
    </div>
    <div class="shop-data" v-else>
        <div class="shop-address">
            <p>
                <span>收货人:{{user.name}}</span>
                <span>{{user.tel}}</span>
                <span> &gt; </span>
            </p>
            <p>
                {{user.address}}
            </p>
        </div>
        <div class="col"></div>
        <div class="cart-item">
            <ul>
                <li v-for='(item,index) in cartList' :key="index">
                    <div class="check-box">
                        <van-checkbox v-model="item.isChecked" checked-color="#ee0a24"></van-checkbox>
                    </div>
                    <div class="cart-item-info">
                        <img :src="item.shop_img">
                        <div class="item-info-right">
                            <p>{{item.shpo_name}}</p>
                            <p>
                                <span>{{item.shop_price.toFixed(2)}}</span>
                                <button @click="shopJian(index)">-</button>
                                <span>{{item.shop_num}}</span>
                                <button @click="shopJia(index)">+</button>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
            <van-submit-bar :price="allPrice * 100" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checked">全选</van-checkbox>
            </van-submit-bar>
        </div>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import Vue from 'vue';
import { AddressList } from 'vant';
import 'vant/lib/address-list/style'
import { Checkbox, CheckboxGroup, Dialog, SubmitBar } from 'vant';
import 'vant/lib/checkbox/style'
import 'vant/lib/checkbox-group/style'
import 'vant/lib/dialog/style'
import 'vant/lib/submit-bar/style'
import TabBar from '../common/tab_bar/TabBar.vue';


Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(AddressList);
Vue.use(SubmitBar);

export default {
  components: { TabBar },
    name:'cartInfo',
    data() {
        return {
            isShow:false,
            user:{
                name:'张三',
                tel:"13000000000",
                address:"BUBA"
            },
            cartList:[],
            checked:''
        }
    },
    created() {
        let a = localStorage.getItem("shopcart");
        a = a == null? [] : JSON.parse(a);
        this.cartList = a;
        if(a.length == 0){
            this.isShow = true
        }else{
            this.isShow = false
        }
        
    },
    methods:{
        shopJian(index){
            if(this.cartList[index].shop_num == 1){
                Dialog.alert({
                    title: '是否移除该商品',
                    message: '',
                }).then((b) => {
                    this.cartList.splice(index,1);
                    localStorage.setItem("shopcart",JSON.stringify(this.cartList))
                });
            }else{
                this.cartList[index].shop_num--;
                localStorage.setItem("shopcart",JSON.stringify(this.cartList))
            }
        },
        shopJia(index){
            this.cartList[index].shop_num++
            localStorage.setItem("shopcart",JSON.stringify(this.cartList))
        },
        onSubmit(){

        }
    },
    computed:{
        allPrice(){
            return this.cartList.reduce((s,item)=>{
                if(item.isChecked){
                    s += item.shop_price * item.shop_num
                }
                return s
            },0)
        }
    }
}
</script>

<style scoped>
.shop-address{
    padding: 5px 10px;
    font-size:18px ;
    line-height: 42px;
}
.shop-address p:first-of-type span:first-of-type{
    margin-right: 100px;
}
.shop-address p:first-of-type span:last-of-type{
    margin-left: 20px;
}
.col{
    width: 100%;
    height: 5px;
    background: red;
}
li{
    display: flex;
}
.check-box{
    width: 40px;
}
.cart-item-info{
    flex: 1;
    display: flex;
}
.cart-item-info img{
    width: 100px;
}
.item-info-right{
    flex: 1;
}
.van-checkbox{
    justify-content: center;

    height: 100%;
}
.item-info-right.p{
    margin-bottom:10px;
}
.van-submit-bar{
    bottom: 50px;
}
.cart-item{
    height: calc(100vh - 260px);
    overflow: auto;
}
</style>